<template>
	<view class="outerView">

		<view v-if="carList.length == 0">
			<view class="viewU">
				<view class="image">
					<image src="/static/组 6@2x.png"></image>
				</view>
				<view class="text">
					暂无车辆信息
				</view>
			</view>
		</view>
		<view v-if="carList.length != 0">
			<view class="viewList" v-for="item in carList" :key="item.id">
				<view class="image">
					<image :src="item.img"></image>
				</view>
				<view class="viewBody">
					<view class="text">
						车型：{{item.type}}
					</view>
					<view class="text">
						车牌：{{item.carNum}}
					</view>
					<view class="default" @click="defaultDialog(item.id)">
						<uni-data-checkbox v-model="item.defaulted" :localdata="set" />
					</view>
				</view>
				<view class="delete" @click="deleteDialog(item.id)">
					删除
				</view>
			</view>
		</view>
		<view class="viewD">
			<navigator url="/pages/my/myCar/addCar/addCar" class="button">
				添加爱车
			</navigator>
		</view>
		<view>
			<!-- 删除提示窗示例 -->
			<uni-popup ref="deleteDialog" type="dialog">
				<uni-popup-dialog cancelText="关闭" confirmText="删除" title="通知" content="是否要删除该车辆"
					@confirm="deleteConfirm"></uni-popup-dialog>
			</uni-popup>
			<!-- 设置默认提示窗示例 -->
			<uni-popup ref="defaultDialog" type="dialog">
				<uni-popup-dialog cancelText="关闭" confirmText="确认" title="通知" content="是否要修改默认车辆"
					@confirm="defaultConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>
<!-- multiple -->
<script>
	export default {
		data() {
			return {
				carList: [],
				isDefault: null,
				defaultId: null, //获取的要设置默认的id
				deleteId: null,
				set: [{
					text: '设置默认',
					value: 1
				}],
			}
		},
		methods: {
			deleteDialog(id) {
				this.deleteId = id
				this.$refs.deleteDialog.open()
			},
			deleteConfirm() {
				uni.request({
					url: 'http://localhost/dev-api/user/info/' + this.deleteId,
					method: 'DELETE',
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						setTimeout(() => {
							this.$router.go(0)
						}, 0)
					},
				})
				console.log('点击确认')
			},
			defaultDialog(id) {
				this.defaultId = id
				this.$refs.defaultDialog.open()
			},
			defaultConfirm() {
				uni.request({
					url: 'http://localhost/dev-api/user/info/default',
					data: {
						uid: 1,
						id: this.defaultId,
						defaulted: 1
					},
					method: 'PUT',
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						setTimeout(() => {
							this.$router.go(0)
						}, 0)
					},
				})
				console.log('点击确认')
			},
			// 封装获取动态数据的函数
			getCarData(options) {
				uni.request({
					url: 'http://localhost/dev-api/user/info/list',
					data: {
						uid: 1,
					},
					method: 'GET',
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						this.carList = this.carList.concat(resp.data.rows)
					},
				})
			},
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getCarData()
		},
	}
</script>

<style>
	.outerView {
		background-color: #fff;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		height: 100%;
		/* position: relative; */

	}

	.viewU {
		padding: 220rpx;
		width: 200rpx;
	}

	.viewU image {
		width: 200rpx;
		height: 200rpx;
	}

	.viewList {
		width: 700rpx;
		padding: 10rpx 40rpx;
		display: flex;
		justify-content: space-around;
		box-shadow: 0px 2px 6px 0px rgba(239, 239, 239, 1);
		background-color: #fff;
	}

	.image image {
		width: 77px;
		height: 77px;
		background-color: rgba(229, 229, 229, 1);
		border-radius: 50px;
	}

	.text {
		left: 121px;
		top: 229.5px;
		width: 120px;
		height: 20px;
		line-height: 20px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	// .default{
	// 	display: flex;
	// }
	.viewBody {
		padding-top: 20rpx;
	}

	.delete {
		width: 28px;
		height: 20px;
		line-height: 20px;
		color: rgba(234, 23, 3, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		padding-top: 20rpx;
	}

	.viewD {
		/* position: absolute;
		top: 100rpx; */
		position: fixed;
		bottom: 20px;
	}

	.button {
		width: 282px;
		height: 39px;
		background-color: #1D6FFF;
		color: #fff;
		border-radius: 15px;
		text-align: center;
		line-height: 39px;
	}
</style>